<template>
    <div>
        <div class="header">
            <span>一颗红心</span>
        </div>
        <div class="unload_img">
            <div class="title">
                <label><p>*</p>文章标题</label>
                <input type="text" placeholder="标题不超过20字" @change="getTitle" :value="title">
            </div>
            <div class="selective">
                <label>
                    <p>*</p>
                    所属分类
                </label>
                <p type="text" placeholder="请选择分类" class="selectCategory" >{{className}}</p>
                <!--<img class="input_icon" src="@as/img/shuju_icon_xiala.png" alt="">-->
                <mu-select v-model="normal.value" @change="changeClassify" class="selectstyle">
                    <mu-option v-for="(item,index) in orgArray" :key="index" :label="item.class_name"
                               :value="item.id">
                    </mu-option>
                </mu-select>

            </div>
            <div class="describe">
                <label><p>*</p>文章内容</label>
                <textarea rows="10" cols="22" placeholder="文章内容不超过2000字"  maxlength="2000"
                          @change="getContent" :value="content"></textarea>
            </div>
            <div class="upload">
                <label>上传照片<span class="help_text">*最多上传9张照片</span></label>
                <div class="imgBlock">
                    <div v-for="(item,index) in imgList" :key="index" class="img">
                        <i @click="noImg(index)"> <img src="@as/img/wode_delete.png" alt=""> </i>
                        <img style="border: 1px solid #f2f2f2" :src="item.photo||item" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                    </div>
                    <div class="uploader" v-if="imgList.length<9">
                        <input type="file" ref="fileInput1" accept="image/*" @change="addImg" multiple />
                    </div>
                </div>
            </div>

            <div class="sum">
                <input type="submit" value="保存" @click="submit(3)">
                <input type="submit" value="发布" @click="submit(0)">
            </div>
        </div>

    </div>
</template>

<script>
    import Toast from 'muse-ui-toast';
    import * as qiniu from 'qiniu-js';
    import {mapMutations} from 'vuex'
    export default {
        data() {
            return {
                imgList: [],
                imgUrl: '',
                title: '',
                content: '',
                status: '',
                normal: {},
                className: '',
                orgArray: [],
                classId: '',
                picList:'',
                hasData:false,
                id:''
            }
        },
        mounted() {
            this.$progress.done();
            this.idDraft()
            this.getNavList()
            this.getToken();
            console.log(this.imgList)
        },
        methods: {
            ...mapMutations(['changeSubNav']),
            idDraft() {
                this.$http
                    .get("app/redstar/draft", {
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                    })
                    .then(res => {
                        if(Object.keys(res.data).length){
                            console.log(res.data)
                            console.log(13)
                            this.title=res.data.title;
                            this.hasData =true;
                            this.className=res.data.class_name
                            this.classId=res.data.class_id
                            this.content=res.data.content
                            this.imgList=res.data.photo;
                            this.id =res.data.id;
                            console.log(this.imgList)
                        }
                    })
            },
            contactStr(arr){
                console.log(arr)
                if(this.hasData&&arr.length){
                    arr.forEach((ele,index)=>{
                        console.log(ele,index);
                        if(index==arr.length-1){
                            console.log(123)
                            if(ele.photo){
                                this.picList+=ele.photo;
                            }else{
                                this.picList+=ele
                            }
                        }else{
                            console.log(426)
                            if(ele.photo){
                                this.picList+=ele.photo+',';
                            }else{
                                this.picList+=ele+','
                            }
                        }
                    })
                }else{
                    arr.forEach((ele,index)=>{
                        console.log(ele,index);
                        if(index==arr.length-1){
                            this.picList+=ele;
                        }else{
                            this.picList+=ele+',';
                        }
                    })
                }
                return this.picList;
            },
            submit(status) {
                if (this.title == '' || this.classId == '' || this.content == '' ) {
                    Toast.error('请检查相关数据是否完善');
                    return false
                }else if(this.imgList.length>9){
                    Toast.error('上传图片最多不超过9张');
                    return false
                }
                else {
                    if(this.title.length>20){
                        Toast.error('标题不能超过20字');
                        return false
                    }
                    this.$http
                        .post("app/redstar/create", {
                            uid: JSON.parse(Cookies.get("user_71ydj")).id,
                            title: this.title,
                            class_id: this.classId,
                            content: this.content,
                            photo:this.contactStr(this.imgList),
                            status: status,
                            id:this.id
                        })
                        .then(res => {
                            console.log(res)
                            if(res.code==200){
                                if(status==3){
                                    Toast.success('一颗红心保存成功');
                                }else{
                                    Toast.success('一颗红心发布成功,请等待后台审核');
                                }
                                let Navsenior =JSON.parse(localStorage.getItem('Navsenior'));
                                console.log(Navsenior)
                                Navsenior.forEach((e,index)=>{
                                    if(e.class_name=='一颗红心'){
                                        console.log(index)
                                        this.changeSubNav({
                                            class_id: Navsenior[index].id,
                                            status:Navsenior[index].status,
                                            selectedId:index
                                        })
                                    }
                                })

                                this.$store.commit('changeIndex',{
                                    selectName:'一颗红心'
                                });
                                this.$router.replace({
                                    path:'/propaganda/love'
                                });
                                // this.$router.go(-1);
                            }else{
                                Toast.error(res.msg)
                            }

                        })
                }
            },


            getTitle(e) {
                this.title = e.target.value;
            },
            getContent(e) {
                this.content = e.target.value;
            },
            changeClassify(e) {
                this.orgArray.forEach((ele, index) => {
                    if (ele.id == e) {
                        this.className = ele.class_name;
                    }
                })
                this.classId = e;
                this.normal.value = e;
            },
            /*
            * 副导航列表
            * */
            getNavList() {
                this.$http
                    .get("app/redstar/red_class", {
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                        org_id: JSON.parse(Cookies.get("user_71ydj")).organization_id,
                    })
                    .then(res => {
                        if(res.code==200){
                            this.orgArray = res.data;
                            if(!this.orgArray.length){
                                Toast.error('暂无分类信息请提醒运营先行添加相关栏目');
                                return false
                            }
                        }

                    });
            },

            /*
            * 获取七牛云token
            * */
            getToken() {
                this.$http.post('/index/index/qiniu', {}).then((res) => {
                    if (res.code == '200') {
                        this.token = res.data.token;
                    }
                })
            },
            /*
            * 图片上传七牛云
            * */
            addImg() {
                let that = this;
                var files = this.$refs.fileInput1.files;
                console.log(files);
                var url = window.URL || window.webkitURL || window.mozURL;
                Array.prototype.forEach.call(files,function (ele,index) {
                    console.log(ele)
                    var observable = qiniu.upload(ele, null, that.token, null);
                    var observer = {
                        next(res) {
                        },
                        error(err) {
                        },
                        complete(res) {
                            that.loading = false;
                            that.hasImg = true;
                            var str = 'https://media.71ydj.com/' + res.hash;
                            that.imgUrl = str;
                            that.imgList.push(str)
                        }
                    };
                    var subscription = observable.subscribe(observer);// 上传开始
                })
            },
            noImg(index) {
                console.log(this.imgList)
                this.imgList.splice(index, 1)
            }
        },
    }
</script>

<style scoped>
    input, textarea, button {
        outline: none;
    }
    .selectstyle {
        position: absolute;
        left: 0;
        width: 100%;
        opacity: 0;
        /*margin-top: 40px;*/
        top: 40px;
        height: 40px;
    }
    .unload_img .selectCategory:after,
    .unload_img input:after
    {
        position: absolute;
        content: '';
        right: 10px;
        top: 50%;
        width: 20px;
        height: 20px;
        background-image: url("../../../../assets/img/shuju_icon_xiala.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 20px 20px;
        margin-top: -10px;

    }
    .selectstyle_box {
        width: 343px;
        height: 40px;
        border: 1px solid #DDDDDD;
        border-radius: 4px;
        line-height: 40px;
        font-size: 14px;
        color: #333;
        padding-left: 21px;
    }

    .header {
        width: 100%;
        height: 205px;
        overflow: hidden;
        background-image: url("../../../../assets/img/xuanchuan_love_icon.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .header span {
        display: inline-block;
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-top: 36px;
        margin-left: 16px;
    }

    .header img {
        width: 130px;
        height: 140px;
        float: right;
    }

    .unload_img {
        width: 343px;
        margin: 0 16px;
        overflow: hidden;
        position: relative;
        top: -90px;
    }

    .unload_img label {
        font-size: 16px;
        color: #333333;
        font-weight: 500;
    }

    .unload_img label p {
        color: red;
        display: inline-block;
        margin-right: 5px;
    }

    .unload_img label span {
        font-size: 10px;
        font-weight: 500;
        color: #999;
        margin-left: 10px;
    }

    .unload_img .selectCategory,.unload_img input {
        width: 343px;
        height: 40px;
        border: 1px solid #DDDDDD !important;
        border-radius: 4px;
        line-height: 40px;
        font-size: 14px;
        color: #333;
        padding-left: 21px;
        position: relative;
    }

    .unload_img .selectCategory::-webkit-input-placeholder,
    .unload_img input::-webkit-input-placeholder{
        font-size: 14px;
        color: #CCCCCC;
        line-height: 40px;

    }

    .selective {
        position: relative;
        height: 90px;
    }
    .selective label{
        display: inline-block;
        height: 30px;
        vertical-align: top;
        margin-top: 10px;
        /*background: red;*/
    }
    .input_icon {
        position: absolute;
        right: 20px;
        top: 70px;
        width: 10px;
        height: 15px;
    }

    .select_box {
        position: relative;
        top: -40px;
        width: 100%;
        opacity: 0;
        font-size: 14px;
        color: #333;
        line-height: 40px;
        height: 40px;
        background: #fff;
    }

    .describe textarea {
        width: 343px;
        height: 200px;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding-left: 21px;
        line-height: 24px;
        color: #333;
        font-size: 14px;
    }

    .describe textarea::-webkit-input-placeholder {
        font-size: 14px;
        color: #ccc;
        line-height: 24px;

    }

    .imgBlock {
        display: block;
        margin-top: 20px;
    }

    .imgBlock input {
        width: 100px;
        height: 100px;
        border-radius: 4px;
        opacity: 0;
        padding: 0 !important;
        position: absolute;
        left: 0;
        top: 0;
    }

    .imgBlock .img {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 100px;
        margin-right: 13px;
        border-radius: 4px;
    }

    .imgBlock > img {
        width: 100px;
        height: 100px;
        border-radius: 4px;
    }

    .imgBlock img:nth-of-type(3n) {
        margin: 0
    }

    .imgBlock .img i {
        z-index: 99;
        position: absolute;
        top: -7px;
        right: -7px;
        width: 20px;
        height: 20px;
    }

    img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .uploader {
        display: inline-block;
        width: 107px;
        height: 107px;
        border-radius: 4px;
        background: url("../../../../assets/img/add_photo.png") center no-repeat;
        background-size: 100% 100%;
        position: relative;
    }


    .sum {
        /*padding:80px 0 75px 0;*/
        clear: both;
        padding-top: 80px;
        display: flex;
    }

    .sum input {
        font-size: 16px;
        color: #fff;
        border: none;
        width: 167px;
        height: 44px;
        border-radius: 4px;
        display: inline-block;
        text-align: center;
        padding: 0;
    }

    .sum input:first-child {
        background: rgba(244, 117, 72, .2);
        color: #EB4D44;
        margin-right: 8px;
    }

    .sum input:last-child {
        color: #FFFFFF;
        background: #EB4D44;
    }
</style>